<template>
    <el-container class="home-container" >
        <el-header>
            <div>
              <span>个人学习空间系统</span>
            </div>
    
            <el-menu mode="horizontal" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b" :router="true">
              <el-menu-item index="/Desktop" >桌面</el-menu-item>
              <el-menu-item index="/Home" >学习管理</el-menu-item>
              <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">XXXX</a></el-menu-item>
              <!-- 包含二级菜单 -->
              <el-submenu index="2">
                <template slot="title">用户</template>
                <el-menu-item index="/user/User">个人中心</el-menu-item>
                <el-menu-item index="1">选项2</el-menu-item>
                <el-menu-item index="2">选项3</el-menu-item>
              </el-submenu>
            </el-menu>

            <!-- <div @click="music_Show">音乐播放器</div> -->

            <div>
              <el-button type="primary" round @click="music_Show">来点音乐吧</el-button>
    
              <el-button type = "info" round @click="logout">退出</el-button>
            </div>
          </el-header>


        <el-main :style="bg1">
          <!-- 左右分为两块， -->
          <el-row >
            <el-col :span="4">
              
                <div class="flex-container">
                  <div>
                    <img class="tupian1" src="../assets/wenjian.jpg" />
                    <span>文件管理</span>
                  </div>
                  <div>
                    <img class="tupian1" src="../assets/jihua.png" />
                    <span>学习计划</span>
                  </div>
                  <div>
                    <img class="tupian1" src="../assets/rili.jpg" />
                    <span>日历</span>
                  </div>
                  <div>
                    <img class="tupian1" src="../assets/kecheng.jpg" />
                    <span>课程推荐</span>
                  </div>
                  <div>
                    <img class="tupian1" src="../assets/huoban.jpg" />
                    <span>伙伴推荐</span>
                  </div>
                  <div>
                    <img class="tupian1" src="../assets/jisuanqi.jpg" />
                    <span>计算器</span>
                  </div>
                  <div>
                    <img class="tupian1" src="../assets/fengge.jpg" />
                    <span>学习风格</span>
                  </div>
                   <div>
                    <img class="tupian1" src="../assets/yinyue.jpg" />
                    <span>音乐</span>
                  </div>
                  <div>
                    <img class="tupian1" src="../assets/rili.jpg" />
                    <span>壁纸设置</span>
                  </div>
                  <!--<div>
                    <img class="tupian1" src="../assets/rili.jpg" />
                    <span>日历</span>
                  </div> -->
                </div>

            </el-col>
            <el-col :span="16">
              <div class="grid-content">
                <Player></Player>
                <!-- 时钟组件 -->
                <AnalogClock class="clockStyle" :size="230" scaleType="roman"
                scaleColor="#fff" hourColor="#fff"
                borderWidth="8" 
                />
                <!-- 音乐播放器 -->
                <div style="width:350px;" v-show="musicShow">
                  <aplayer :music="musics[0]" :list="musics" listFolded :mini="mini" float 
                  repeat='repeat-all'  mode="circulation"></aplayer>
                </div>
                <!-- 添加了脸谱图片，点击换背景图片 -->
                <div class="lianpu">
                  <img class="tupian" src="../assets/lianpu.png" @click="changeSkin" >
                </div>
                <!-- <div>
                  <Player></Player>
                </div> -->
            
              </div>
            </el-col>
          </el-row>
            
    

           
<!--            
            <AnalogClock class="clockStyle" :size="230" scaleType="roman"
            scaleColor="#fff" hourColor="#fff"
            borderWidth="8" 
            />

            
            <div class="lianpu">
              <img id="lianpu1" src="../assets/lianpu.png" @click="changeSkin" >
            </div>   -->
        </el-main>
    </el-container>
</template>

<script>
import aplayer from 'vue-aplayer'
import {AnalogClock} from 'vue-analog-clock'
import Player from 'zw-player'
// import Player from '_zw-player@1.0.6@zw-player'
export default {
  components: {aplayer,AnalogClock,Player,},
    data() {
      return{
          musicShow:false,
          index:0,
          bg1:{
            backgroundImage: 'url('+require('../assets/yuzhou.jpeg')+')',
            backgroundRepeat: 'no-repeat',
            backgroundSize:'100% 100%',
          },
          mini:false,
          musics:  [
          {
            title: '能够成家吗',
            author: '咖啡少年',
            url: require('../assets/music/1.mp3'),                 
            pic:require('../assets/music/1.jpg') // 封面图片
          },
          {
              title:'天空之城',
              artist: '黄叶',
              url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E.m4a',
              pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg',
          },
          {
              title:'蒲空英的约定',
              artist: '黄叶',
              url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a',
              pic: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg" ,
          },
          {
              title:'无畏',
              artist: '马頔',
              url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E9%A9%AC%E9%A0%94%20-%20%E6%97%A0%E7%95%8F.flac',
              pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E4%BB%A5%E5%AE%B6%E4%B9%8B%E5%90%8D.jpg', // prettier-ignore
          },
          {
              title:'蓝乐',
              artist: '白纸',
              url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%93%9D%E4%B9%90%20-%20%E7%99%BD%E7%BA%B8.flac',
              pic: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/-1992181439.jpg" ,
          },
          ],
          
      }
    },

    methods:{
      logout () {
        //清空token，跳转到login
        window.sessionStorage.clear()
        this.$router.push('/login')
      },
      //点击更换背景图片
      changeSkin(){
        this.index=this.index+1;
        if(this.index ==7) this.index=0
        if(this.index==0)
        this.bg1={backgroundImage: 'url('+require('../assets/yuzhou.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%',}
        if(this.index==1)
        this.bg1={backgroundImage: 'url('+require('../assets/study.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%', }
        if(this.index==2)
        this.bg1={backgroundImage: 'url('+require('../assets/xuhua.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%',}
        if(this.index==3)
        this.bg1={backgroundImage: 'url('+require('../assets/qihuan.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%',}
        if(this.index==4)
        this.bg1={backgroundImage: 'url('+require('../assets/miao.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%',}
        if(this.index==5)
        this.bg1={backgroundImage: 'url('+require('../assets/life.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%',}
        if(this.index==6)
        this.bg1={backgroundImage: 'url('+require('../assets/sky.jpeg')+')',backgroundRepeat: 'no-repeat',backgroundSize:'100% 100%',}
      },
      music_Show(){
        this.musicShow=!this.musicShow
      }
    }
}
</script>

<style >

/* 右边布局 */
.grid-content{
  height: 820px;
}
/* 左边布局 */
.flex-container {
  height: 820px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flex-container > div {
  width: 100px;
  margin: 10px;
  text-align: center;
  /* line-height: 100px; */
  font-size: 15px;
  color:#fff;
}

/* .flex-container > div>span{
  color:#fff
} */

.lianpu{
    width: 110px;
    height: 110px;
    position:absolute;
	  top:710px;
    left:1760px
}
.tupian{
    width: 100%;
    height: 100%;
}
.tupian1{
    width: 100%;
    border-radius: 30%;
}

.clockStyle{
  position:absolute;
	top:25px;
  left:1660px
}


.el-main{

  background-color:#eaedf1;
  margin: 0px;
  padding: 0px;
}

/* .home-container{
    height: 100%;
}

.el-header{
  background-color: darkslategrey;
  display:flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 30px;

} */
</style>